<!-- 公告-样式 -->
<template>
    <el-collapse modelValue="1">
        <el-collapse-item title="展现方式" name="1">
            <el-row>
                <el-col :span="24">
                    <el-radio-group v-model="mode">
                        <el-radio :label="0">左右滚动</el-radio>
                        <el-radio :label="1">上下滚动</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>

            <el-divider></el-divider>
            <div class="announce-icon-list">
                <div :class="{ 'active': selectImg === 'announce1' }" class="icon-item" @click="selectImg = 'announce1'">
                    <el-icon><icon-announce1 /></el-icon>
                </div>
                <div :class="{ 'active': selectImg === 'announce2' }" class="icon-item" @click="selectImg = 'announce2'">
                    <el-icon><icon-announce2 /></el-icon>
                </div>
                <div :class="{ 'active': selectImg === 'announce3' }" class="icon-item" @click="selectImg = 'announce3'">
                    <el-icon><icon-announce3 /></el-icon>
                </div>
                <div :class="{ 'active': selectImg === 'announce4' }" class="icon-item" @click="selectImg = 'announce4'">
                    <el-icon><icon-announce4 /></el-icon>
                </div>
                <si-image-picker
                    v-model="selectImg"
                    type="image"
                    :size="35"
                    :show-label="false"
                    class="image-btn"
                />
            </div>

            <el-divider></el-divider>
            <layout-pane label="播放间隔">
                <si-input-number
                    v-model="widget.widgetData.eles.customFeature.interval"
                    :min="0"
                    label="秒数"
                />
            </layout-pane>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import LayoutPane from '@/components/setting-pane/layout-pane'
import {
    SiInputNumber,
    SiImagePicker
} from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'AnnounceMode',
    components: {
        LayoutPane,
        SiInputNumber,
        SiImagePicker
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const mode = computed({
            get: () => widget.value.widgetData.eles.customFeature.mode,
            set: val => widget.value.widgetData.eles.customFeature.mode = val
        })

        const selectImg = computed({
            get: () => widget.value.widgetData.eles.customFeature.selectImg,
            set: val => widget.value.widgetData.eles.customFeature.selectImg = val
        })

        return {
            widget,
            mode,
            selectImg
        }
    }
})
</script>

<style lang="less" scoped>
.announce-icon-list {
    display: flex;
    align-items: center;
    .icon-item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 35px;
        color: var(--edit-color-primary);
        font-size: 18px;
        background-color: var(--edit-color-primary-light-9);
        border: 1px solid #DDE1E5;
        box-sizing: border-box;
        cursor: pointer;
        & + .icon-item {
            margin-left: 8px;
        }
        &.active {
            border: 1px solid var(--edit-color-primary);
        }
    }
    .image-btn {
        margin-left: 8px;
    }
}
</style>